<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>案例</title>
	<style type="text/css">
		/*代码初始化:作用去除原本标签自带的一些样式，统一所有主流浏览器呈现样式*/
		/*去除a链接下划线*/
		a{
			text-decoration: none;
		}
		/*去除列表标记*/
		li{
			list-style-type: none;
		}

		/*1、绘制总体区域*/
		.hezi{
			width: 250px;
			height: 290px;
			border:1px solid #e0e0e0;
		}
		.a_hezi{
			width: 100%;
			height: 50px;
			font-size: 0px;
		}
		/*2、选择后代，选择a_hezi底下的a*/
		.a_hezi a{
			width: 50%;
			height: 50px;
			background-color: #ea4100;
			color: black;
			display: inline-block;
			font-size: 16px;
			/*水平居中*/
			text-align: center;
			/*单行文本的垂直居中*/
			line-height: 50px;
		}
		/*3、添加背景*/
		.zuo{
			background-image: url('https://ae01.alicdn.com/kf/Hd4480443a3834abf82a69a692165b17a6.jpg');
			background-repeat: no-repeat;
			background-size: 30px 30px;
			background-position: 11px 9px;
		}
		.you{
			background-image: url('https://ae01.alicdn.com/kf/H60ff7fde1b364c4eb2954c16791654cbb.jpg');
			background-repeat: no-repeat;
			background-size: 23px 25px;
    		background-position: 14px 12px;
		}
		/*4、设置鼠标悬停样式*/
		.zuo:hover{
			color: #fff;
			background-image: url('https://ae01.alicdn.com/kf/H684c7b1abc2f470bbd773272e1c2fffa9.jpg');
		}
		.you:hover{
			color: #fff;
			background-image: url('https://ae01.alicdn.com/kf/Hf6de9c2b84d740298aedaa0c0715b2f5C.jpg');
		}
		/*5、添加列表区域*/
		.liebiao{
			width: 100%;
		}
		/*后代选择器*/
		.liebiao ul li{
			line-height: 150%;
		}
		.liebiao ul li a{
			color: #999;
			font-size: 14px;
		}
		.liebiao ul li a span{
			color: rgb(255,0,0);
		}
	</style>
</head>
<body>
	<div class="hezi">
		<!-- 选项区域布局 -->
		<div class="a_hezi">
			<a href="#" class="zuo">&nbsp;&nbsp;&nbsp;&nbsp;会员登录</a>
			<a href="#" class="you">&nbsp;&nbsp;&nbsp;&nbsp;免费注册</a>
		</div>
		<!-- 列表区域布局 -->
		<div class="liebiao">
			<ul>
				<li>
					<a href="#">
						<span>【企业】</span>
						上海么么么么么么么木
					</a>
				</li>
				<li>
					<a href="#">
						<span>【企业】</span>
						上海么么么么么么么木
					</a>
				</li>
				<li>
					<a href="#">
						<span>【企业】</span>
						上海么么么么么么么木
					</a>
				</li>
				<li>
					<a href="#">
						<span>【企业】</span>
						上海么么么么么么么木
					</a>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>